HTML Paragraphs

    A general paragraph represents a block of text and always starts from a new line.

    HTML Paragraphs

    In HTML paragraphs can be defined using <p> element. Paragraph text always starts from a new line, the browser parsed the <p> tag and automatically add some margin and white space after the end </p> tag.

    Example 

    <p> Hello! and Welcome to TechGeekBuzz </p>
<p> Here you get to know all about the latest technology. </p>

    Display

    The display of your page content may vary from device to device, for instance, a large screen display can show more than 15 words on a single line whereas the small display like mobile can show only 5 to 6 words. In the HTML document, if you have added extra space or line between the paragraph content, the browser will remove those extra space and lines by a single space.

    Example 

    <p>
Welcome
to
TechGeekBuzz </p>

<p> This is       a            series of
HTML                                    5
tutorial </p>

    When the browser parses this paragraph element, it will remove all the extra space and line break with single space.

    Output 

    Welcome to TechGeekBuzz
This is a series of HTML 5 tutorial

    Horizontal Rule

    To print a horizontal crease on the browser display we can use the HTML <hr> tag. <hr> tag generally used to represent a horizontal line that can be used as a separator between two content on the same page. <hr> is an empty tag so we can write is as <hr/>.

    Example 

    <h1> TechGeekBuzz </h1>
<p> Become a Tech Professional for free</p>
<hr>
<h2> Free HTML tutorial </h2>
<p>Learn everything about HTML 5</p>

    Line break

    Generally, if we put a line in between the paragraph content, the browser will automatically remove that line and replace it with a single space. But if we want to add a line break in a paragraph, we can do this with the help of <br> tag. <br> is an empty tag which means it does not have an end tag, and it can be used to provide a line break without starting a new paragraph.

    Example 

    <p> Welcome <br> to <br> TechGeekBuzz!<p>

    Output 

    Welcome
to
TechGeekBuzz

    HTML preformatted tag

    The preformatted element can be represented using the <pre> tag. This is a replacement tag for <p> if you want to present the line break and spaces that you have provided in the HTML document. The preformatted text displayed precisely in the same way that it has been written in the document. <pre> tag is not suggested to display standard text, because the browser changes the text font and enclose it in a box-like display.

    Example 

    <pre>
Welcome to
TechGeekBuzz! 
<pre>

    Output 

    Welcome to
TechGeekBuzz!

    Summary

    • A page paragraph can be defined under the <p> element.
    • If any text under the <body> does not have any specified element, then it would be treated as a paragraph tag.
    • Each paragraph starts with a new line.
    • <hr> is an empty tag that can print a horizontal rule on the browser display.
    • <br> break is used to provide a line break within a paragraph.
    • <pre> preformatted is an alternative element of <p> that can display its content in a preserved way.
    • <pre> element is generally used to display code and other distinct text.
    • All the code that is present on this page is displayed using the <pre> tag.
    Previous Tutorial Next Tutorial